import React, { useState } from 'react';
import { Card, Row, Col, Space, Switch, Select, Typography, Divider } from 'antd';
import Logo from '../../compages/Logo';

const { Title, Paragraph } = Typography;
const { Option } = Select;

const LogoDemo: React.FC = () => {
  const [animated, setAnimated] = useState(true);
  const [size, setSize] = useState<'small' | 'medium' | 'large'>('medium');
  const [showText, setShowText] = useState(true);
  const [effect, setEffect] = useState<string>('');

  const effects = [
    { value: '', label: '默认' },
    { value: 'pulse', label: '脉冲' },
    { value: 'rotate', label: '旋转' },
    { value: 'gradient', label: '渐变文字' },
    { value: 'three-d', label: '3D效果' },
    { value: 'loading', label: '加载动画' }
  ];

  return (
    <div style={{ padding: '24px' }}>
      <Title level={2}>Logo 组件展示</Title>
      <Paragraph>
        这是一个现代化的Logo组件，支持多种尺寸、动画效果和主题适配。
      </Paragraph>

      {/* 控制面板 */}
      <Card title="控制面板" style={{ marginBottom: '24px' }}>
        <Row gutter={[16, 16]}>
          <Col span={6}>
            <Space direction="vertical">
              <span>动画效果:</span>
              <Switch checked={animated} onChange={setAnimated} />
            </Space>
          </Col>
          <Col span={6}>
            <Space direction="vertical">
              <span>显示文字:</span>
              <Switch checked={showText} onChange={setShowText} />
            </Space>
          </Col>
          <Col span={6}>
            <Space direction="vertical">
              <span>尺寸:</span>
              <Select value={size} onChange={setSize} style={{ width: '100%' }}>
                <Option value="small">小</Option>
                <Option value="medium">中</Option>
                <Option value="large">大</Option>
              </Select>
            </Space>
          </Col>
          <Col span={6}>
            <Space direction="vertical">
              <span>特效:</span>
              <Select value={effect} onChange={setEffect} style={{ width: '100%' }}>
                {effects.map(e => (
                  <Option key={e.value} value={e.value}>{e.label}</Option>
                ))}
              </Select>
            </Space>
          </Col>
        </Row>
      </Card>

      {/* Logo 展示 */}
      <Row gutter={[24, 24]}>
        <Col span={8}>
          <Card title="基础Logo" hoverable>
            <div style={{ display: 'flex', justifyContent: 'center', padding: '20px' }}>
              <Logo 
                size={size} 
                animated={animated} 
                showText={showText}
                className={effect}
              />
            </div>
          </Card>
        </Col>
        
        <Col span={8}>
          <Card title="小尺寸Logo" hoverable>
            <div style={{ display: 'flex', justifyContent: 'center', padding: '20px' }}>
              <Logo 
                size="small" 
                animated={animated} 
                showText={showText}
                className={effect}
              />
            </div>
          </Card>
        </Col>
        
        <Col span={8}>
          <Card title="大尺寸Logo" hoverable>
            <div style={{ display: 'flex', justifyContent: 'center', padding: '20px' }}>
              <Logo 
                size="large" 
                animated={animated} 
                showText={showText}
                className={effect}
              />
            </div>
          </Card>
        </Col>
      </Row>

      <Divider />

      {/* 不同效果展示 */}
      <Title level={3}>不同效果展示</Title>
      <Row gutter={[16, 16]}>
        {effects.map(effect => (
          <Col span={6} key={effect.value}>
            <Card title={effect.label} hoverable>
              <div style={{ display: 'flex', justifyContent: 'center', padding: '20px' }}>
                <Logo 
                  size="medium" 
                  animated={true} 
                  showText={true}
                  className={effect.value}
                />
              </div>
            </Card>
          </Col>
        ))}
      </Row>

      <Divider />

      {/* 仅图标模式 */}
      <Title level={3}>仅图标模式</Title>
      <Row gutter={[16, 16]}>
        <Col span={6}>
          <Card title="小图标" hoverable>
            <div style={{ display: 'flex', justifyContent: 'center', padding: '20px' }}>
              <Logo size="small" animated={true} showText={false} />
            </div>
          </Card>
        </Col>
        <Col span={6}>
          <Card title="中图标" hoverable>
            <div style={{ display: 'flex', justifyContent: 'center', padding: '20px' }}>
              <Logo size="medium" animated={true} showText={false} />
            </div>
          </Card>
        </Col>
        <Col span={6}>
          <Card title="大图标" hoverable>
            <div style={{ display: 'flex', justifyContent: 'center', padding: '20px' }}>
              <Logo size="large" animated={true} showText={false} />
            </div>
          </Card>
        </Col>
        <Col span={6}>
          <Card title="无动画" hoverable>
            <div style={{ display: 'flex', justifyContent: 'center', padding: '20px' }}>
              <Logo size="medium" animated={false} showText={true} />
            </div>
          </Card>
        </Col>
      </Row>

      <Divider />

      {/* 使用说明 */}
      <Card title="使用说明">
        <Paragraph>
          <strong>Props:</strong>
        </Paragraph>
        <ul>
          <li><code>size</code>: 'small' | 'medium' | 'large' - Logo尺寸</li>
          <li><code>showText</code>: boolean - 是否显示文字</li>
          <li><code>animated</code>: boolean - 是否启用动画</li>
          <li><code>className</code>: string - 额外的CSS类名</li>
        </ul>
        
        <Paragraph>
          <strong>特效类名:</strong>
        </Paragraph>
        <ul>
          <li><code>pulse</code> - 脉冲效果</li>
          <li><code>rotate</code> - 旋转效果</li>
          <li><code>gradient</code> - 渐变文字</li>
          <li><code>three-d</code> - 3D效果</li>
          <li><code>loading</code> - 加载动画</li>
        </ul>
      </Card>
    </div>
  );
};

export default LogoDemo; 